<template>
  <div id="vipAdd">
    <c-title :hide="false" text="会员管理"></c-title>
    <div class="searchBox">
      <i class="iconfont icon-member-left" @click="blackTap"></i>
      <div class="searchMin">
        <i class="iconfont icon-all_search_2"></i>
        <van-field
          v-model="keyWord"
          placeholder="搜索会员昵称/手机号"
          @blur="tapWkd"
        />
      </div>
    </div>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in listData" :key="index">
        <div class="lsitTop">
          <div class="img" v-if="item.has_one_vip_member">
            <img :src="item.has_one_vip_member.avatar" alt="" />
          </div>
          <div class="user" v-if="item.has_one_vip_member">
            <div class="name">
              {{ item.has_one_vip_member.nickname }}
              <div class="grade">{{ item.has_one_vip_member.uid }}</div>
            </div>
            <div class="time">化债期：{{ item.end_time_str }}</div>
          </div>
          <div class="typeTxt">{{ item.status_name }}</div>
        </div>
        <div class="account">
          {{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}：
          <div class="price">￥{{ item.common_credit }}</div>
        </div>
        <div class="ticket">
          <div
            class="btn"
            @click="addToVip(item, 'coupon')"
            v-if="item.status == 1"
          >
            联名提货券
          </div>
        </div>
      </div>
    </div>
    <div class="addBtn set-pc-style">
      <div class="addTap" @click="addToVip(item)">添加VIP</div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      debtId: "",
      listData: [],
      keyWord: "",
      owner_common_credit: "",
      plugin_setting:{},

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.debtId = this.$route.params.debtId;
    this.getData();
    this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
  },
  methods: {
    init() {
      this.listData = [];
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
    },
    tapWkd() {
      this.init();
      this.getData();
    },
    blackTap() {
      this.$router.go(-1);
    },
    addToVip(item, key) {
      if (key) {
        this.$router.push(
          this.fun.getUrl("vipAddindex", {
            debtId: this.debtId,
            credit: this.owner_common_credit,
            cvid: item.id,
            coupon: true,
            vid: item.has_one_vip_member.uid,
          })
        );
      } else {
        this.$router.push(
          this.fun.getUrl("vipAddindex", {
            debtId: this.debtId,
            credit: this.owner_common_credit,
          })
        );
      }
    },
    getData() {
      $http
        .post(
          "plugin.debt-shop.frontend.owner.vipList",
          { debtor_id: this.debtId, member_kwd: this.keyWord },
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
            this.owner_common_credit = response.data.owner_common_credit;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .post(
            "plugin.debt-shop.frontend.debtor.refundList",
            {
              debtor_id: this.debtId,
              member_kwd: this.keyWord,
              page: this.page,
            },
            "加载中"
          )
          .then(
            (response) => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listData = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.addBtn {
  position: fixed;
  display: flex;
  width: 100%;
  height: 3.47rem;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -0.06rem 0.66rem 0 rgba(206, 206, 206, 0.42);
  background-color: #fff;

  .addTap {
    width: 19.13rem;
    height: 2.5rem;
    background-color: #f15353;
    border-radius: 1.25rem;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
  }
}

.listBox {
  padding: 0.63rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;

  .lis {
    background-color: #fff;
    border-radius: 0.31rem;
    padding: 0.75rem 0.75rem 0.59rem 0.75rem;
    margin-bottom: 0.625rem;

    .ticket {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 1rem;

      .btn {
        width: 5.34rem;
        height: 1.78rem;
        background-color: #f15353;
        border-radius: 0.88rem;
        text-align: center;
        line-height: 1.78rem;
        color: #fff;
      }
    }

    .account {
      display: flex;
      align-items: center;
      margin-top: 0.91rem;
      font-size: 0.69rem;
      color: #7e7e7e;

      .price {
        color: #f15353;
        font-size: 0.69rem;
      }
    }

    .lsitTop {
      display: flex;

      .typeTxt {
        font-size: 0.75rem;
        color: #f15353;
      }

      .user {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        .time {
          font-size: 0.63rem;
          color: #7e7e7e;
        }

        .name {
          display: flex;
          align-items: center;
          font-size: 0.88rem;
          color: #2f2f2f;

          .grade {
            width: 2.38rem;
            height: 1.13rem;
            background-color: #feeded;
            border-radius: 0.56rem;
            font-size: 0.63rem;
            color: #f15353;
            text-align: center;
            line-height: 1.13rem;
            margin-left: 0.75rem;
          }
        }
      }

      .img {
        width: 2.5rem;
        height: 2.5rem;
        background-color: #b6b6b6;
        border-radius: 100%;
        margin-right: 0.53rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
    }
  }
}

.searchBox {
  display: flex;
  padding: 0.44rem 1.16rem 0.44rem 0.94rem;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;

  .searchMin {
    width: 20rem;
    height: 1.88rem;
    background-color: #eff0f1;
    border-radius: 0.94rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;

    .iconfont {
      margin-right: 0.44rem;
      color: #999;
    }

    .van-cell {
      flex: 1;
      padding: 0;
      background-color: #eff0f1;
    }
  }
}
</style>
